<template>
  <div class="menu">
    <el-scrollbar wrap-class="scrollbar-wrapper" style="height:100%;" :native="true">
      <div class="router">
        <div class="routerBox" v-for="(item,index) in menus" :key="index" :class="{'activeHead': $route.name == item.routerName, 'noChild': !item.children}">
          <div class="title" @click="headClick(item, index)">
            <div class="titlesName">
              <i :class="item.icon" class="iconfont"></i>
              <span>{{ item.routerTitle }}</span>
            </div>
            <em class="el-icon-arrow-down" :class="{'arrow': item.showChild}" v-if="item.children"></em>
          </div>
          <el-collapse-transition>
            <ul class="child" v-if="item.showChild">
              <li @click="headClick(m)" :class="{ 'active': $route.path.indexOf(m.routerName) > 0 }" v-for="(m, i) in item.children" :key="i">{{ m.routerTitle }}</li>
            </ul>
          </el-collapse-transition>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>
<script type="text/ecmascript-6">
// import Routers from '@/router/home/homeChild/homeChild'
export default {
  name: 'navBar',
  data () {
    return {
      menus: [{
        routerTitle: '总览',
        icon: 'el-icon-menu',
        showChild: true,
        children: [{
          routerTitle: 'API用户管理',
          routerName: 'userManger'
        },
        {
          routerTitle: 'API订单管理',
          routerName: 'orderManger'
        }]
      },
      {
        routerTitle: '充值记录',
        icon: 'el-icon-date',
        showChild: true,
        children: [{
          routerTitle: '用户充值记录',
          routerName: 'rechargeList'
        }]
      },
      {
        routerTitle: '编辑商品',
        icon: 'el-icon-edit-outline',
        showChild: true,
        routerName: 'editGoods'
      }]
    }
  },
  methods: {
    headClick (item, index) {
      if (item.children) {
        this.menus[index].showChild = !this.menus[index].showChild
      } else {
        this.$router.push({ name: item.routerName, query: this.$route.query })
      }
    }
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
$navBarBg = rgba(58, 68, 98, 1)
$activeBg = rgba(0, 21, 40, 1)
$color = rgb(191, 203, 217)
.menu
  background #F8F8F8
  height 100%
  width 100%
  display flex
  flex-direction column
  overflow hidden
  background $navBarBg
  color $color
  filter blur(0px)
  .router
    flex 1
    overflow auto
    padding-top 20px
    padding-bottom 40px
    .routerBox
      .title
        height 40px
        line-height 40px
        font-size 14px
        padding 0 20px
        cursor pointer
        display flex
        justify-content space-between
        align-items center
        color #ffffff
        &:hover
          position relative
          transition all 0.2s
        i
          margin-right 8px
          font-size 18px
        em
          transition all 0.2s
        .arrow
          transform rotate3d(0, 0, 1, -180deg)
      .titlesName
        display flex
        align-items center
      .child
        display flex
        flex-direction column
        li
          padding-left 46px
          min-width 55px
          height 40px
          line-height 40px
          font-size 14px
          cursor pointer
          transition all 0.2s
          &:hover
            background $activeBg
        .active
          background $activeBg
          color $mainColor
    .activeHead
      .title
        background $activeBg
        i, span
          color $mainColor
    .noChild
      &:hover
        background $activeBg
</style>
